<template>
  <div class="pagination">
    <el-pagination
      v-model:current-page="formInline.page"
      v-model:page-size="formInline.pageSize"
      :page-sizes="[10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.total ?? 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
defineProps({
  formInline: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(['sizeChange', 'currentChange']);
const handleSizeChange = (val) => {
  emit('sizeChange', val);
};
const handleCurrentChange = (val) => {
  emit('currentChange', val);
};
</script>
<style lang="scss" scope></style>
